<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>员工页面</title>


    <!--自定义样式-->
    <link rel="stylesheet" type="text/css" th:href="@{/css/my.css}">
    <!-- Bootstrap -->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <style>

        .eum-li {
            background: #D8D8D8;
        }

        .pag-p {
            margin-bottom: -158px;
            margin-left: 190px;
        }
    </style>


    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>

</head>
<body>


<!--页头-->
<div class="header mb10">
    <div class="container">
        <div class="row header-logo">
            <div class="col-sm-6 col-md-4">
                <img th:src="@{/img/logo.png}" class="img-responsive" alt="Responsive image">
            </div>
            <div class="hidden-xs hidden-sm col-md-4">
                <img th:src="@{/img/home.png}" class="img-responsive" alt="Responsive image" style="margin-top: 8%;">
            </div>


            <div class="col-sm-6 col-md-4">

                <div class="input-group" style="margin-top: 12%;">
                    <input type="text" class="form-control" placeholder="Search">
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                  </span>
                </div>
            </div>
        </div>
        <!--头部导航栏-->
        <nav class="row header-nav">
            <dig class="col-md-12">
                <ul class="nav nav-pills ">
                    <li role="presentation" class="nav_button">
                        <a th:href="@{/}">首页</a>
                    </li>
                    <li role="presentation" class="nav_button">
                        <a th:href="@{/emp/}">员工信息</a>
                    </li>
                    <li role="presentation" class="nav_button">
                        <a th:href="@{/dept/}">部门信息</a>
                    </li>


                </ul>
            </dig>
        </nav>
    </div>
</div>


<!--清除-->
<div class="clearfix"></div>
<!-- 主内内容窗体 -->
<div class="content mb10">
    <div class="container" style="height: 450px;">
        <div class="row">


            <!-- 导航栏 -->
            <div class="col-md-4 " style="border-radius:20% 20% ">
                <div class="bs-example eum-li" data-example-id="simple-nav-stacked" style="border: #9d9d9d 1px solid
            ;border-radius:10% 10%;">
                    <ul class="nav nav-pills nav-stacked nav-pills-stacked-example">

                        <li role="presentation" class="disabled"><a href="#"></a></li>

                        <li role="presentation"><a href="#">功能一</a></li>
                        <li role="presentation"><a href="#">功能二</a></li>
                        <li role="presentation"><a href="#">功能三</a></li>
                        <li role="presentation"><a href="#">功能四</a></li>
                        <li role="presentation"><a href="#">功能五</a></li>
                        <li role="presentation"><a href="#">功能六</a></li>
                        <li role="presentation"><a href="#">功能七</a></li>
                        <li role="presentation"><a href="#">功能八</a></li>

                        <li role="presentation" class="disabled"><a href="#"></a></li>
                    </ul>
                </div>
            </div>
            <!-- 表格 -->
            <div class="col-md-8">

                <form method="get" th:action="@{/emp/findbyname}">
                    <!--                 条件查找-->
                    <div class="input-group col-md-3" style="margin-top:0px; positon:relative">
                        <input type="text" class="form-control" placeholder="请输入字段名" name="name"/>
                        <span class="input-group-btn">

               <button class="btn btn-info btn-search">查找</button>



            </span>
                    </div>

                </form>


                <!--                <div>-->

                <!--                </div>-->
                <h4>员工名单</h4>
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>部门</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody th:if="${page == null}">
                    <tr>
                        <td colspan="6">
                            [[${msg}]]
                        </td>
                    </tr>
                    </tbody>
                    <tbody th:unless="${page == null}">
                    <tr th:each="e,state : ${page.list}">
                        <td th:text="${state.count}"></td>
                        <td th:text="${e.empName}"></td>
                        <td th:text="${e.gender}"></td>
                        <td th:text="${e.email}"></td>
                        <td th:text="${e.department.deptName}"></td>
                        <td>
                            <a th:href="@{'/emp/toUpdpage/'+ ${e.empId}}" type="button" class="btn btn-warning">修改</a>
                            <a th:href="@{'/emp/del?id=' + ${e.empId}}"
                               onclick="return confirm('确认删除嘛？')"
                               type="button" class="btn btn-danger">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>


                <!-- 分页 区域-->
                <script th:inline="javascript">
                    console.log([[${page.list}]])
                    var page = [[${page}]];
                    console.log(page)
                </script>

                <nav th:unless="${page == null}">
                    <ul class="pagination pag-p">

                        <li class="disabled">
                            <a style="border: none;">
                                共<span th:text="${page.total}"></span>条 / <span th:text="${page.pages}"></span>页
                            </a>
                        </li>

                        <li th:if="${page.hasPreviousPage}"><!--  如果page前没有上一页   显示首页-->
                            <a th:href="@{'/emp/findbyname?name='+${{name}}+'&pageNum=1'}">首页</a>
                        </li>
                        <!--    循环遍历页码数-->
                        <li th:each="num : ${page.navigatepageNums}">
                            <!--                            判断当前页码是不是与选择的页码相等-->
                            <a th:if="${num==page.pageNum}  " style="color: red;"
                               th:href="@{'/emp/findbyname?name='+${{name}}+'&pageNum=' + ${num}}">[[${num}]]</a>
                            <a th:unless="${num} == ${page.pageNum}"
                               th:href="@{'/emp/findbyname?name='+${{name}}+'&pageNum=' + ${num}}" th:text="${num}"></a>
                        </li>
                        <!--  如果page前没有下一页   显示首页-->
                        <li th:if="${page.hasNextPage}">
                            <a th:href="@{'/emp/findbyname?name='+${{name}}+'&pageNum=' + ${page.pages}}">末页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>


</div>

<div class="footer">
    <div class="container">
        <div class="row footer-logo">
            <div class="col-md-4">
                <img th:src="@{/img/logo.png}" class="img-responsive" alt="Responsive image">
            </div>


            <div class="col-md-5 footer-a-distance">
                <div class="col-md-3">
                    <a href="#">学校简介</a>
                </div>
                <div class="col-md-3">
                    <a href="#">合作交流</a>
                </div>
                <div class="col-md-3">
                    <a href="#">招生工作</a>
                </div>
                <div class="col-md-3">
                    <a href="#">版权申请通道</a>
                </div>

            </div>


            <div class="col-md-8">

            </div>
        </div>
        <div class="row footer-right">
            <dig class="col-md-12">
                <div class="col-md-3 footer-p">
                    <p>
                        招生咨询热线：0316-2901888、0316-2901877
                    </p>
                </div>
                <div class="col-md-3 footer-p">
                    <p> 河北省廊坊市开发区东方大学城一期圣陶路（主校区）</p>
                </div>
                <div class="col-md-2 footer-p">
                    <p> 邮箱：oitoffice@126.com </p>
                </div>


                <div class="col-md-3 footer-p">

                    <div class="col-md-1">
                        <img th:src="@{/img/img.png}" style="margin-top: 8px">
                    </div>
                    <div class="col-md-8">
                        冀ICP备17030115号-1 <br>
                        冀ICP备17030115号-1
                    </div>
                </div>

                <!--                <div class="col-md-3 footer-p" >-->
                <!--                    冀ICP备17030115号-1 <br>-->
                <!--                    冀ICP备17030115号-1-->
                <!--                </div>-->

            </dig>
        </div>
    </div>
</div>
</body>
</html>
